<template>
  <el-dialog v-model="dialog" :title="paramsData.id ? '更新菜单' : '添加菜单'">
    <el-form>
      <el-form-item label="名称" :label-width="100">
        <el-input v-model="paramsData.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限" :label-width="100">
        <el-input v-model="paramsData.code" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="savePermission($parent)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { permissionObj, MenuParams } from '@/api/acl/menu/type'
import { reqAddOrUpdatePermission } from '@/api/acl/menu'
import { ElMessage } from 'element-plus'
const dialog = ref(false)
const paramsData = reactive<MenuParams>({
  code: '', // 权限数值
  name: '', // 菜单的名字
  id: 0,
  level: 0, // 几级菜单
  pid: 0, // 菜单的ID
})
const addDialog = (row: permissionObj) => {
  dialog.value = true
  paramsData.pid = row.id as number
  paramsData.level = row.level + 1
}
const updateDialog = (row: permissionObj) => {
  dialog.value = true
  Object.assign(paramsData, row)
}
// 点击确定
const savePermission = async ($parent: any) => {
  const res = await reqAddOrUpdatePermission(paramsData)
  if (res.code === 200) {
    ElMessage.success(paramsData.id ? '更新成功' : '添加成功')
    cancel()
    $parent.getList()
  } else {
    ElMessage.error('系统数据不可更改')
    cancel()
  }
}
// 点击取消
const cancel = () => {
  dialog.value = false
  Object.assign(paramsData, {
    code: '', // 权限数值
    name: '', // 菜单的名字
    id: 0,
    level: 0, // 几级菜单
    pid: 0, // 菜单的ID
  })
}
defineExpose({
  addDialog,
  updateDialog,
})
</script>

<style lang="scss" scoped></style>
